<template>
  <div class="patrol">
    <module
      ref="module"
      :borderConfig="patrolCompletionMonth.borderConfig"
      :moduleConfig="patrolCompletionMonth.moduleConfig"></module>
    <module
      ref="module1"
      :borderConfig="patrolTimelyMonth.borderConfig"
      :moduleConfig="patrolTimelyMonth.moduleConfig"></module>
    <module
      ref="module2"
      :borderConfig="patrolAbnormalMonth.borderConfig"
      :moduleConfig="patrolAbnormalMonth.moduleConfig"></module>
    <module
      ref="module3"
      :borderConfig="patrolOrgan.borderConfig"
      :moduleConfig="patrolOrgan.moduleConfig"
      :isShowDimension="patrolOrgan.isShowDimension"></module>
    <module
      ref="module4"
      :borderConfig="patrolSettingOrgan.borderConfig"
      :moduleConfig="patrolSettingOrgan.moduleConfig"
      :isShowDimension="patrolOrgan.isShowDimension"></module>
  </div>
</template>

<script>
import module from '../components/SecondaryModule'
import { changeBarData, separateData } from './../../utils/index'
export default {
  components: {
    module
  },
  computed: {
    organId () {
      return this.$store.state.organId
    }
  },
  name: 'patrol',
  data () {
    return {
      // 巡更完成率趋势配置
      patrolCompletionMonth: {
        borderConfig: {
          titleText: '巡更完成率趋势',
          moduleType: '43x32',
          ref: 'patrolCompletionMonth'
        },
        moduleConfig: {
          optionsConfig: {
            axis: {
              yAxisConversion: '%', // Y轴坐标%
              xAxisDataType: 2 // X轴坐标从1月份开始
            },
            yAxis: {
              max: 100
            },
            tooltipsConfig: {
              symbol: '%',
              isNamePreposition: false,
              tipsMessage: '巡更完成率'
            },
            grid: {
              top: 40
            },
            seriesData: []
          },
          legendDirection: 'level',
          legendList: [{ name: new Date().getFullYear() - 1, colorIndex: 0 }, { name: new Date().getFullYear(), colorIndex: 1 }]
        }
      },
      // 巡更及时率趋势
      patrolTimelyMonth: {
        borderConfig: {
          titleText: '巡更及时率趋势',
          moduleType: '43x32',
          ref: 'patrolTimelyMonth'
        },
        moduleConfig: {
          optionsConfig: {
            axis: {
              yAxisConversion: '%', // Y轴坐标%
              xAxisDataType: 2 // X轴坐标从1月份开始
            },
            yAxis: {
              max: 100
            },
            tooltipsConfig: {
              symbol: '%',
              isNamePreposition: false,
              tipsMessage: '巡更及时率'
            },
            grid: {
              top: 40
            },
            seriesData: []
          },
          legendDirection: 'level',
          legendList: [{ name: new Date().getFullYear() - 1, colorIndex: 0 }, { name: new Date().getFullYear(), colorIndex: 1 }]
        }
      },
      // 巡更异常率趋势
      patrolAbnormalMonth: {
        borderConfig: {
          titleText: '巡更异常率趋势',
          moduleType: '43x32',
          ref: 'patrolAbnormalMonth'
        },
        moduleConfig: {
          optionsConfig: {
            axis: {
              yAxisConversion: '%', // Y轴坐标%
              xAxisDataType: 2 // X轴坐标从1月份开始
            },
            yAxis: {
              max: 100
            },
            tooltipsConfig: {
              symbol: '%',
              isNamePreposition: false,
              tipsMessage: '巡更异常率'
            },
            grid: {
              top: 40
            },
            seriesData: []
          },
          legendDirection: 'level',
          legendList: [{ name: new Date().getFullYear() - 1, colorIndex: 0 }, { name: new Date().getFullYear(), colorIndex: 1 }]
        }
      },
      // 巡更指标对比配置
      patrolOrgan: {
        borderConfig: {
          titleText: '巡更指标对比',
          moduleType: '2x32',
          ref: 'patrolOrgan'
        },
        moduleConfig: {
          optionsConfig: {
            axis: {
              xAxisNameLength: 8,
              yAxisConversion: '%' // Y轴坐标%
            },
            xAxis: {
              axisLabel: {
                rotate: 30
              },
              data: []
            },
            yAxis: {
              max: 100
            },
            tooltipsConfig: {
              symbol: '%',
              isNamePreposition: true
            },
            grid: {
              top: 40,
              bottom: 0
            },
            dataZoom: {
              show: true,
              left: '60%'
            },
            seriesData: []
          },
          legendDirection: 'level',
          legendClassName: true,
          legendList: [{ name: '巡更完成率', colorIndex: 0 }, { name: '巡更及时率', colorIndex: 1 },
            { name: '巡更异常率', colorIndex: 2 }]
        },
        isShowDimension: true
      },
      // 巡更设置对比配置
      patrolSettingOrgan: {
        borderConfig: {
          titleText: '巡更设置对比',
          moduleType: '2x32',
          ref: 'patrolSettingOrgan'
        },
        moduleConfig: {
          optionsConfig: {
            axis: {
              xAxisNameLength: 8,
              yAxisConversion: 'w'
            },
            xAxis: {
              axisLabel: {
                rotate: 30
              },
              data: []
            },
            yAxis: {
              minInterval: 10
            },
            tooltipsConfig: {
              // symbol: '%',
              isNamePreposition: true
            },
            grid: {
              top: 40,
              bottom: 0
            },
            dataZoom: {
              show: true,
              right: '2%'
            },
            seriesData: []
          },
          legendDirection: 'level',
          legendClassName: true,
          legendList: [{ name: '项目平均巡更计划', colorIndex: 0 }, { name: '项目平均巡更路线', colorIndex: 1 }]
        },
        isShowDimension: true
      }
    }
  },
  methods: {
    showTips (data) {
      this.$parent.showTips(data)
    },
    // 改变时间维度时
    changeDimension (obj) {
      switch (obj.ref) {
        case 'patrolOrgan': this.getPatrolRateContrastByCompany(obj.index + 1)
          break
        case 'patrolSettingOrgan': this.getPatrolSettingContrastByCompany(obj.index + 1)
          break
        default: break
      }
    },
    // 巡更完成率、及时率，异常率趋势
    getDtFieldContrastsByYear () {
      this.patrolApi.getDtFieldContrastsByYear({ organId: this.organId }).then(res => {
        let data1 = []
        let data2 = []
        let data3 = []
        if (res.data.code === '0') {
          data1 = changeBarData(res.data.data, 'finishRate')
          data2 = changeBarData(res.data.data, 'timelyRate')
          data3 = changeBarData(res.data.data, 'abnormalRate')
        } else {
          this.showTips({ showMessage: '请求失败，点击确认继续刷新', sureCallback: this.getData })
        }
        // 巡更完成率
        this.patrolCompletionMonth.moduleConfig.optionsConfig.seriesData = [
          {
            data: data1[0],
            name: new Date().getFullYear() - 1 + '年',
            colorIndex: 0
          },
          {
            data: data1[1],
            name: new Date().getFullYear() + '年',
            colorIndex: 1
          }
        ]
        // 巡更及时率
        this.patrolTimelyMonth.moduleConfig.optionsConfig.seriesData = [
          {
            data: data2[0],
            name: new Date().getFullYear() - 1 + '年',
            colorIndex: 0
          },
          {
            data: data2[1],
            name: new Date().getFullYear() + '年',
            colorIndex: 1
          }
        ]
        // 巡更异常率
        this.patrolAbnormalMonth.moduleConfig.optionsConfig.seriesData = [
          {
            data: data3[0],
            name: new Date().getFullYear() - 1 + '年',
            colorIndex: 0
          },
          {
            data: data3[1],
            name: new Date().getFullYear() + '年',
            colorIndex: 1
          }
        ]
      }, res => {
        // 巡更完成率
        this.patrolCompletionMonth.moduleConfig.optionsConfig.seriesData = [
          {
            data: [],
            name: new Date().getFullYear() - 1 + '年',
            colorIndex: 0
          },
          {
            data: [],
            name: new Date().getFullYear() + '年',
            colorIndex: 1
          }
        ]
        // 巡更及时率
        this.patrolTimelyMonth.moduleConfig.optionsConfig.seriesData = [
          {
            data: [],
            name: new Date().getFullYear() - 1 + '年',
            colorIndex: 0
          },
          {
            data: [],
            name: new Date().getFullYear() + '年',
            colorIndex: 1
          }
        ]
        // 巡更异常率
        this.patrolAbnormalMonth.moduleConfig.optionsConfig.seriesData = [
          {
            data: [],
            name: new Date().getFullYear() - 1 + '年',
            colorIndex: 0
          },
          {
            data: [],
            name: new Date().getFullYear() + '年',
            colorIndex: 1
          }
        ]
        this.showTips({ showMessage: '请求失败，点击确认继续刷新', sureCallback: this.getData })
      })
    },
    // 巡更完成率、及时率，异常率分公司对比
    getPatrolRateContrastByCompany (timeDimensionIndex) {
      let timeDimension = 1
      if (timeDimensionIndex) {
        timeDimension = timeDimensionIndex
      }
      this.patrolApi.getPatrolRateContrastByCompany({ organId: this.organId, timeDimension: timeDimension }).then(res => {
        let data1 = []
        let data2 = []
        let data3 = []
        let name = []
        if (res.data.code === '0') {
          let obj = separateData(res.data.data, 'finishRate')
          data1 = obj.data
          data2 = separateData(res.data.data, 'timelyRate').data
          data3 = separateData(res.data.data, 'abnormalRate').data
          name = obj.tipsName
        } else {
          this.showTips({ showMessage: '请求失败，点击确认继续刷新', sureCallback: this.getData })
        }
        this.patrolOrgan.moduleConfig.optionsConfig.xAxis.data = name
        this.patrolOrgan.moduleConfig.optionsConfig.seriesData = [
          {
            data: data1,
            name: '巡更完成率',
            colorIndex: 0,
            isBar: true
          },
          {
            data: data2,
            name: '巡更及时率',
            colorIndex: 1,
            isBar: true
          },
          {
            data: data3,
            name: '巡更异常率',
            colorIndex: 2,
            isBar: true
          }
        ]
      }, res => {
        this.patrolOrgan.moduleConfig.optionsConfig.xAxis.data = []
        this.patrolOrgan.moduleConfig.optionsConfig.seriesData = [
          {
            data: [],
            name: '巡更完成率',
            colorIndex: 0,
            isBar: true
          },
          {
            data: [],
            name: '巡更及时率',
            colorIndex: 1,
            isBar: true
          },
          {
            data: [],
            name: '巡更异常率',
            colorIndex: 2,
            isBar: true
          }
        ]
        this.showTips({ showMessage: '请求失败，点击确认继续刷新', sureCallback: this.getData })
      })
    },
    // 巡更设置分公司对比
    getPatrolSettingContrastByCompany (timeDimensionIndex) {
      let timeDimension = 1
      if (timeDimensionIndex) {
        timeDimension = timeDimensionIndex
      }
      this.patrolApi.getPatrolSettingContrastByCompany({ organId: this.organId, timeDimension: timeDimension }).then(res => {
        let data1 = []
        let data2 = []
        // let data3 = []
        let name = []
        if (res.data.code === '0') {
          let obj = separateData(res.data.data, 'scheduleNum')
          data1 = obj.data === undefined ? [] : obj.data
          data2 = separateData(res.data.data, 'routeNum').data === undefined ? [] : separateData(res.data.data, 'routeNum').data
          // data3 = separateData(res.data.data, 'spotNum').data
          name = obj.tipsName === undefined ? [] : obj.tipsName
        } else {
          this.showTips({ showMessage: '请求失败，点击确认继续刷新', sureCallback: this.getData })
        }
        this.patrolSettingOrgan.moduleConfig.optionsConfig.xAxis.data = name
        this.patrolSettingOrgan.moduleConfig.optionsConfig.seriesData = [
          {
            data: data1,
            name: '项目平均巡更计划',
            colorIndex: 0,
            isBar: true
          },
          {
            data: data2,
            name: '项目平均巡更路线',
            colorIndex: 1,
            isBar: true
          }
          // {
          // data: data3,
          // name: '路线平均巡更点',
          // colorIndex: 2,
          // isBar: true
          // }
        ]
      }, res => {
        this.patrolSettingOrgan.moduleConfig.optionsConfig.xAxis.data = []
        this.patrolSettingOrgan.moduleConfig.optionsConfig.seriesData = [
          {
            data: [],
            name: '项目平均巡更计划',
            colorIndex: 0,
            isBar: true
          },
          {
            data: [],
            name: '项目平均巡更路线',
            colorIndex: 1,
            isBar: true
          }
          // {
          // data: data3,
          // name: '路线平均巡更点',
          // colorIndex: 2,
          // isBar: true
          // }
        ]
        this.showTips({ showMessage: '请求失败，点击确认继续刷新', sureCallback: this.getData })
      })
    },
    // 请求数据
    getData () {
      this.getDtFieldContrastsByYear()
      this.getPatrolRateContrastByCompany()
      this.getPatrolSettingContrastByCompany()
    },
    resizeChart () {
      this.$refs.module.resizeChart()
      this.$refs.module1.resizeChart()
      this.$refs.module2.resizeChart()
      this.$refs.module3.resizeChart()
      this.$refs.module4.resizeChart()
    }
  },
  mounted () {
    // this.getData()
  }
}
</script>

<style lang="scss" scoped>
  .patrol{
    width: calc(100% - 10px);
    position: relative;
    margin: 5px;
    overflow: hidden;
    moz-user-select: -moz-none;
    -moz-user-select: none;
    -o-user-select:none;
    -khtml-user-select:none;
    -webkit-user-select:none;
    -ms-user-select:none;
    user-select:none;
  }
</style>
